import React, { useState } from "react";
import { Layout } from 'antd';
import './Service.less'
import { useNavigate, Outlet } from 'react-router-dom';
import img from '../assets/img/1.jpg'

import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';


const Service: React.FC = () => {
    const navigate = useNavigate();
    const name = localStorage.getItem('userId')

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                    1st menu item
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                    2nd menu item (disabled)
                </a>
            ),
            icon: <SmileOutlined />,
            disabled: true,
        },
        {
            key: '3',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                    3rd menu item (disabled)
                </a>
            ),
            disabled: true,
        },
        {
            key: '4',
            danger: true,
            label: 'a danger item',
        },
    ];

    const [showModal, setShowModal] = useState(false);

    // 点击头像后切换模态框的显示状态
    const dian = () => {
        setShowModal(!showModal);  // 切换状态
    };
    const tuichu = () => {
        localStorage.removeItem('userId')
        localStorage.removeItem('accessToken')
        localStorage.removeItem('refreshToken')
        navigate('/login')
    }


    return (
        <div className="service">
            <div className="service-header">
                <div className="service-header-left">
                    <span>齐溪水库灌区运行管理平台</span>
                </div>
                <div className="service-header-middle">
                    <div onClick={() => navigate('/home/ErrorCaptured')}>
                        <span><img src="/定位.png" width={30} height={30} /></span>
                        <br />
                        <span>灌区一张图</span>
                    </div>
                    <div onClick={() => navigate('/service/guangai')}>
                        <span><img src="/柱状图.png" width={30} height={30} /></span>
                        <br />
                        <span>用水计量</span>
                    </div>
                    {/* <div onClick={() => navigate('/water-management')}>
                        <span><img src="/名单.png" width={30} height={30} /></span>
                        <br />
                        <span>放水管理</span>
                    </div> */}
                    {/* <div onClick={() => navigate('/monitoring')}>
                        <span><img src="/综合.png" width={30} height={30} /></span>
                        <br />
                        <span>综合监测</span>
                    </div> */}
                    <div onClick={() => navigate('/service/Operational')}>
                        <span><img src="/书.png" width={30} height={30} /></span>
                        <br />
                        <span>运行管理</span>
                    </div>
                    {/* <div onClick={() => navigate('/four-items')}>
                        <span><img src="/项目综合.png" width={30} height={30} /></span>
                        <br />
                        <span>灌区四项</span>
                    </div> */}
                    <div onClick={() => navigate('/service/layout/yujing')}>
                        <span><img src="/资产.png" width={30} height={30} /></span>
                        <br />
                        <span>资产运维</span>
                    </div>
                    <div onClick={() => navigate('/service/alerts')}>
                        <span><img src="/aislogo.png" width={30} height={30} /></span>
                        <br />
                        <span>灌区助理</span>
                    </div>
                    <div onClick={() => navigate('/service/DataCenter/sub-1')}>
                        <span><img src="/设置.png" width={30} height={30} /></span>
                        <br />
                        <span>数据中心</span>
                    </div>
                </div>
                <div className="service-header-right">
                    <div className="service-header-right-content">
                        {/* <BellOutlined color="#fff" size={15} /> */}

                        <img src={img} alt="" style={{
                            width: 30,
                            height: 30,
                            borderRadius: '50%',
                            marginLeft: 10,
                            textAlign: 'center'
                        }}
                            onClick={() => dian()}
                        />
                        <span className="spa">{name}</span>
                    </div>
                </div>
            </div>
            {/* 模态框 */}
            {showModal && (
                <div
                    style={{
                        position: 'absolute',
                        top: '70px',  // 模态框距离头像的位置
                        left: '90%',
                        transform: 'translateX(-50%)',
                        padding: '20px',
                        backgroundColor: 'white',
                        border: '1px solid #ddd',
                        borderRadius: '8px',
                        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
                        width: '200px',
                        textAlign: 'center',
                        zIndex: 9999,
                    }}
                >
                    <button style={{
                        width: '100%',
                    }} onClick={() => tuichu()}>退出</button>
                </div>
            )}

            <div className="service-body">
                <Outlet />
            </div>
        </div>

    )
}

export default Service;